<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="triangle-arrow"></div>

  <div class="div"></div>
  </br>
  <div class="separate"></div>
  </br>
  <div class="triangle"></div>
  <h1>请输入数字</h1>
  <input type="number" min='1' max="10">
  <h2>结果：</h2>

  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
  <input type="checkbox" name="" id="">
</body>
<style>
  .triangle-arrow {
    width: 0;
    height: 0;
    border-top: 10px solid;
    border-left: 10px solid;
    border-bottom: 10px solid;
    border-right: 10px solid;
    border-color: transparent transparent transparent green;
  }

  .triangle-arrow::before {
    content: '';
    /*CSS伪类用法*/
    position: absolute;
    background: #494949;
    /*宽和高做出来的背景横线*/
    width: 10px;
    height: 2px;
    left: 0;
    transform: translate(0px, -50%);
  }

  .div {
    border: 10px solid;
    border-color: red black green yellow;
    width: 4px;
    height: 4px;
  }

  .separate {
    width: 0px;
    height: 0px;
    border-top: 10px solid;
    border-left: 10px solid;
    border-right: 10px solid;
    border-bottom: 10px solid;
    border-color: red green blue black;
  }

  .triangle {
    width: 0;
    height: 0;
    border-top: 10px solid;
    border-left: 10px solid;
    border-color: red white;
    /*border-right:10px;*/
  }


  input{
    width: 200px;
    height: 50px;
    border-radius: 10px;
    font-size: 20px;
  }
  input:out-of-range{
    background: gold;
  }
  input:out-of-range + h2::after {
    content: '超出范围'
  }
  input::after {
    content: '已勾选';
    display: none;
    width: 150px;
    height: 50px;
    margin-left: 110px;
  }
  input:checked::after{display: block;}
</style>

</html>